<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


    <title>任务十首页</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="task10.css">

</head>
<body>
<header>




    <div class="container-fluid">

        <div class="container">
            <div class="row">

                <div class="head">

                       <div class="phone-left">客服热线：010-594-78634</div>

                    <div class="login-right">

                         <a href="">
                             <div class="login1-border">
                                 <div class="login1">登陆</div>
                             </div>
                         </a>

                         <a href="">
                             <div class="login2-border">
                                 <div class="login2">注册</div>
                             </div>
                         </a>

                    </div>

                </div>

            </div>
        </div>


    </div>

    <nav class="navbar navbar-default navbatr-fixed-right" id="navbar" role="navigation">
        <div class="container" >
            <div class="row" >

                <div class="navbar-header">
                    <!--小屏幕导航按钮logo-->
                    <button class="navbar-toggle" id="navbar-toggle" data-toggle="collapse" data-target="#responsive-navbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                    </div>


                <!--导航-->
                <div class="collapse  navbar-collapse " id="responsive-navbar" >
                    <ul class="nav navbar-nav navbar-right push-hutton "  >
                        <li><a class="btn-a"  href="#"> 首页   </a></li>
                        <li><a class="btn-b"  href="#"> 在线定制</a></li>
                        <li><a class="btn-c"  href="#"> 标准箱  </a></li>
                        <li><a class="btn-d"  href="#"> 品质保障</a></li>
                    </ul>
                </div>

            </div>

        </div>

    </nav>

</header>

<div class="main">

    <div class="container">

        <div class="parcel">

            <div class="overall">

                  <div class="overall-box">
                      <div class="process"></div>
                      <div class="figure">1</div>
                      <div class="arrange"></div>
                  </div>
                <div class="figure-bottom">1.定制纸箱</div>
            </div>


            <div class="overall">

                <div class="overall-box">
                    <div class="process"></div>
                    <div class="figure">2</div>
                    <div class="arrange"></div>
                </div>
                  <div class="figure-bottom">2.选择数量</div>
            </div>


            <div class="overall">

                <div class="overall-box">
                    <div class="process"></div>
                    <div class="figure">3</div>
                    <div class="arrange"></div>
                </div>
                    <div class="figure-bottom">3.上传附件</div>
            </div>


            <div class="overall">

                <div class="overall-box">
                    <div class="process"></div>
                    <div class="figure">4</div>
                    <div class="arrange"></div>
                </div>
                  <div class="figure-bottom">4.确认下单</div>
            </div>


        </div>

    </div>


    <div class="container">

        <div class="text-custom">
            <span class="rectangle"></span>
            <p class="text-custom2">请您按照以下步骤来定制您的纸箱</p>
        </div>

        <div class="text-custom-two">
            <div class="choose-box"></div>
            <p class="text-custom3">选择箱型</p>
        </div>

    </div>




    <div class="container md-5">

        <div class="row1">


            <div class="col-sm-9 col-md-9">

                <div class="col-sm-3 col-md-3">
                    <div class="centre-dot"></div>
                    <input id="appoint-one" type="radio" name="gender"  value="男" checked>
                    <label for="appoint-one">对口箱</label>
                </div>

                <div class="col-sm-3 col-md-3">
                    <input id="appoint-two" type="radio" name="gender"  value="男" checked>
                    <label for="appoint-two">飞机盒</label>
                </div>


                <div class="col-sm-3 col-md-3">
                     <input id="appoint-three" type="radio" name="gender"  value="男" checked>
                     <label for="appoint-three">天地盖</label>
                </div>

            </div>



            <div class="box3 col-sm-3 col-md-3">

               <div class=" row">
                <label class="down-p">

                    <select >
                        <option >查看详情</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                    </select>
                </label>

                </div>
            </div>

        </div>

    </div>



    <div class="container md-6">

        <div class="text-custom-special2">
            <div class="choose-box2"></div>
            <p class="text-custom4">确定尺寸</p>
        </div>

    </div>

    <div class="container md-7">

        <div class="row2">

            <div class="col-sm-9 col-md-9">
                <div class="col-12 ">
                <div class="col-sm-3 col-md-3">
                    <div class="centre-dot"></div>
                    <input id="appoint-four" type="radio" name="get"   >
                    <label for="appoint-four">外径</label>
                </div>

                    <div class="col-sm-3 col-md-3">
                        <label>长
                            <input class="wide-w"   maxlength="5">
                       mm</label>

                    </div>

                    <div class="col-sm-3 col-md-3">
                        <label>长
                            <input class="wide-w"   maxlength="5">
                            mm</label>

                    </div>

                    <div class="col-sm-3 col-md-3">
                        <label>长
                            <input class="wide-w"   maxlength="5">
                            mm</label>

                    </div>






                </div>

             </div>

            <div class="col-sm-9 col-md-9">
                <div class="col-12 ">
                    <div class="col-sm-3 col-md-3">
                        <div class="centre-dot"></div>
                        <input id="appoint-five" type="radio" name="get"   >
                        <label for="appoint-five">内径</label>
                    </div>

                    <div class="col-sm-3 col-md-3">
                        <label>长
                            <input class="wide-w"   maxlength="5">
                            mm</label>

                    </div>

                    <div class="col-sm-3 col-md-3">
                        <label>长
                            <input class="wide-w"   maxlength="5">
                            mm</label>

                    </div>

                    <div class="col-sm-3 col-md-3">
                        <label>长
                            <input class="wide-w"   maxlength="5">
                            mm</label>

                    </div>

                </div>


            </div>


            <div class="box2 col-sm-3 col-md-3">


                <div class="row">
                    <label class="down-p">

                        <select >
                            <option >查看详情</option>
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                        </select>
                    </label>


            </div>
               </div>

        </div>

    </div>


    <div class="container md-6">

        <div class="text-custom-special">
            <div class="choose-box3"></div>
            <p class="text-custom4">确定尺寸</p>
        </div>

    </div>

    <div class="container md-8">

        <div class="row dot">

<div class="col-sm-12 col-md-12">
<div class="col-sm-9 col-md-9">


            <div class="col-sm-4 col-md-3">
                <input id="appoint-last1" type="radio" name="buttom"  value="男" checked>
                <label for="appoint-last1">三层A瓦优质</label>
            </div>

            <div class="col-sm-4 col-md-3">
                <input id="appoint-last2" type="radio" name="buttom"  value="男" checked>
                <label for="appoint-last2">三层A瓦优质</label>
            </div>


            <div class="col-sm-4 col-md-3">
                <input id="appoint-last3" type="radio" name="buttom"  value="男" checked>
                <label for="appoint-last3">三层A瓦优质</label>
            </div>


            <div class="col-sm-4 col-md-3">
                <input id="appoint-last4" type="radio" name="buttom"  value="男" checked>
                <label for="appoint-last4">三层A瓦优质</label>
            </div>

            <div class="col-sm-4 col-md-3">
                <input id="appoint-last5" type="radio" name="buttom"  value="男" checked>
                <label for="appoint-last5">三层A瓦优质</label>
            </div>

</div>

                <div class="box2 col-sm-3 col-md-3">

                <div class="row">
                    <label class="down-p">

                        <select >
                            <option >查看详情</option>
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                        </select>
                    </label>
                </div>
                </div>
            </div>
        </div>
        </div>


    <div class="container main-bottom ">
       <button class="bottom">下一步</button>
    </div>


</div>


<footer>

    <div class="container box-6">

        <div class="row">
    <div class="col-sm-12 col-md-4 box-7">

        <div style="color: #999999;">

            51包装网— 纸箱包装首选服务平台

        </div>

    </div>


        <div class="col-sm-12 col-md-4 box-7">

            <div class="level-two">
                <a class="link-2"><div>关于我们</div></a>&nbsp;&nbsp;&nbsp;&nbsp;
                <a class="link-2"><div>配送流程</div></a>&nbsp;&nbsp;&nbsp;&nbsp;
                <a class="link-2"><div>联系我们</div></a>
            </div><br>
            <div class="level-two">
                <a class="link-2"><div>下单指南</div></a>&nbsp;&nbsp;&nbsp;&nbsp;
                <a class="link-2"><div>媒体介绍</div></a>

        </div>
        </div>

            <div class="col-sm-12 col-md-4">
                <div class="level-one">
                    <div>
                <div class="box-8" style="color: #999999;">TEL：400-0000-000</div>
                <div class="box-8" style="color: #999999;">企业QQ：123456789</div>
                <div class="box-8" style="color: #999999;">微信号：XXXXXXX</div>
                    </div>
                 <div class="code"></div>
                </div>
            </div>


    </div>
    </div>

    <div class="box-footer">
        <div class="box-10">
            北京五一包装科技有限公司Copyright ©2015&nbsp;&nbsp;
            51baozhuang.com015   All rights reserved.   京icp备99999999-1
        </div>
    </div>

</footer>








<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>